<!--
 * @Description: 
 * @Date: 2021-10-28 15:10:05
 * @LastEditTime: 2022-04-28 13:56:00
 * @FilePath: \vue3-element-plus\src\components\screen-full\index.vue
 * @Author: Devin
-->
<template>
  <div class="screen-full" @click="changeFull()">
    <slot>
      <i
        :class="{
          iconfont: true,
          'cc-fullscreen-expand': !isFullscreen,
          'cc-fullscreen-shrink': isFullscreen
        }"
      ></i
    ></slot>
  </div>
</template>

<script lang='ts'>
import { reactive, toRefs } from '@vue/reactivity';
import screenfull, { Screenfull } from 'screenfull';
let sf = screenfull as Screenfull;
export default {
  name: 'ScreenFull',
  setup(props: any, context: { emit: (arg0: string, arg1: boolean) => void }) {
    const state = reactive({
      isFullscreen: false
    });
    const changeFull = (): void => {
      state.isFullscreen = !state.isFullscreen;
      toggleFullScreen();
    };
    const change = (): void => {
      state.isFullscreen = sf.isFullscreen;
      context.emit('change', state.isFullscreen);
    };
    const toggleFullScreen = (): void => {
      if (screenfull.isEnabled) {
        if (sf.isFullscreen) {
          sf.exit();
          sf.on('change', change);
        } else {
          sf.request();
          sf.on('change', change);
        }
      }
    };
    return {
      ...toRefs(state),
      changeFull
    };
  }
};
</script>
<style scoped lang='scss'>
.screen-full:hover {
  .cc-fullscreen-expand {
    transform: scale(1.5, 1.5);
  }
}
.cc-fullscreen-expand {
  transition: all 0.5s linear;
}
.cc-fullscreen-shrink {
  transition: all 0.5s linear;
}
</style>


